<template>
	<view class="bottom">
		<view class="nav-box">
			
			<!-- nav 底部导航 -->
			<view class="df dfsa w95p mauto tac f24 ptb10">
				<view class="w25p"  v-for="(item,index) in nav" :key="index" @click="navli(index)">
					<image class="circlee" :src="item.urling" v-if="i == index"></image>
					<image class="circlee" :src="item.url" v-else></image>
					<view class="pt5 f26" :class="(i == index)?'c333':'c999'"> {{item.name}} </view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>

	// 创建页面全局变量
	var that;

	//
	export default {

		components: {},

		// 
		data() {

			return {
				
				// 底部导航列表
				nav:[
					{
						path:'pages/index/index',
						url:"/static/tab11.png",
						urling:'/static/tab11ing.png',
						name:'班组管理',
					},
					{
						path:'pages/Statistics/Statistics',
						url:"/static/tab3.png",
						urling:'/static/tab3ing.png',
						name:'班组统计',
					},
					{
						path:'pages/wd/wd',
						url:"/static/tab2.png",
						urling:'/static/tab2ing.png',
						name:'个人中心',
					}
				],
				// nav下标
				i:0,
				
			}
		},

		// 页面显示后
		created() {

			// 赋值this给that
			that = this;

			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			
			for(var i=0;i<that.nav.length;i++){
				// console.log(that.nav[i].path,page.route);
				if(page.route == that.nav[i].path){
					that.i = i;
				}
			}
		},

		// 方法列表
		methods: {

			navli(index){
				that.i = index;
				uni.reLaunch({
					url:'/'+ that.nav[index].path,
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	
	.circlee {
		height: 38rpx;
		width: 38rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
		background: #fff;
		z-index: 10;
	}
	
</style>